<template>
 <div>
     <img src="../../../../assets/phone/pxback.png" style="height: 40px;width: 40px;margin-top:60px" @click="goback">
        <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px"
        style="margin-top:40px">
            <el-form-item label="用户名">
                <el-input :disabled="true" v-model="username" style="width:200px"></el-input>
            </el-form-item>
            <el-form-item label="电话号码" prop="phone">
                <el-input v-model="ruleForm.phone" style="width:200px"></el-input>
            </el-form-item>
            <el-form-item label="电子邮箱" prop="email" :style="CheckNumShow?'margin-top:85px':''">
                <el-input v-model="ruleForm.email" style="width:200px"></el-input>
            </el-form-item>
            <el-form-item label="性别" prop="resource">
                <el-radio-group v-model="ruleForm.resource">
                <el-radio label="男"></el-radio>
                <el-radio label="女"></el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submitForm('ruleForm')">修改信息</el-button>
                <el-button @click="resetForm('ruleForm')">重置</el-button>
            </el-form-item>
        </el-form>
        <el-form :model="ruleForm2" status-icon :rules="rules2" ref="ruleForm2" label-width="100px" class="perdataruleForm2"
        v-show="CheckNumShow">
            <el-form-item label="验证码" prop="checkNum">
                <el-input placeholder="请输入验证码" type="text" style="width:130px;"
                 v-model="ruleForm2.checkNum"></el-input>
            </el-form-item>
            <span @click="sendSMSBtn" v-show="sendSMSbtnshow" class="sendSMSBtn">发送验证码</span>
            <span v-show="sendSMSbtnshow2" class="sendSMSBtn2">{{changeShowNum}}秒再次发送</span>
        </el-form>
 </div>
</template>

<script>
import axios from 'axios'
export default {
    name:'PxChangeInfo',
        data(){
            var checkPhone = (rule, value, callback) => {
                if (!value) {
                return callback(new Error('手机号码不能为空'));
                }
                setTimeout(() => {
                if (isNaN(value)) {
                    callback(new Error('请输入数字值'));
                } else {
                    if (value.length != 11) {
                    callback(new Error('手机号码必须为11位数字'));
                    } else {
                    callback();
                    }
                }
                }, 200);
            };
            var checkNum= (rule, value, callback) => {
                    if (!value) {
                        return callback(new Error('验证码不能为空'));
                    }
                    setTimeout(() => {
                    if (isNaN(value)) {
                        callback(new Error('请输入数字值'));
                    } else {
                        if (value.length != 6) {
                        callback(new Error('必须为6位数字'));
                        } else {
                        // callback();
                        this.$addr.get(`sms/${this.ruleForm2.checkNum}/check`).then(
                            response=>{
                                console.log('请求成功了',response)
                                if(response.data.state == 7000){
                                    callback(new Error('验证码输入有误'))
                                }else if(response.data.state == 200){
                                    this.CanDoNext=1
                                    callback()
                                }
                            },
                            error=>{
                                console.log('请求失败了',error.message)
                            }
                        )
                        }
                    }
                    }, 200);
            };
            return{
                CanDoNext:0,
                sendSMSbtnshow:0,
                sendSMSbtnshow2:0,
                changeShowNum:0,
                templateID:1341381,//修改手机号码模板id
                CheckNumShow:0,
                OldPhone:'',
                username:'',
                sex:0,
                ruleForm:{
                    phone:'',
                    email:'',
                    resource:'',
                },
                ruleForm2:{checkNum:''},
                rules: {
                    phone: [
                        { required: true, validator: checkPhone, trigger: 'blur' },
                    ],
                    email: [
                        { required: true, message: '请输入邮箱地址', trigger: 'blur' },
                        { type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur' },
                    ],
                    resource: [
                        { required: true, message: '请输入选择真实的性别', trigger: 'blur' },
                    ],
                },
                rules2:{
                    checkNum:[
                        { required: true, validator: checkNum, trigger: 'blur'},
                    ]
                }
            }
        },
        methods: {
          goback(){this.$router.push({name:'PxPersionMain'})},
            submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                if (valid) {
                    if(this.ruleForm.resource == '男'){
                        this.ruleForm.sex = 1
                    }else{
                        this.ruleForm.sex = 0
                    }
                    if(this.OldPhone != this.ruleForm.phone){
                        this.CheckNumShow=this.sendSMSbtnshow=1
                        if(!this.CanDoNext){
                            this.$notify.warning({
                                title: '提示',
                                message: '请发送验证码进行核验',
                                showClose:false,
                                duration:3000,
                            });
                            this.$refs[formName].validate()
                        }else{
                            this.$confirm('您将修改个人信息, 是否继续?', '提示', {
                                confirmButtonText: '继续',
                                cancelButtonText: '取消',
                                type: 'warning'
                            }).then(() => {
                                this.$addr.get(`users/change_info?phone=${this.ruleForm.phone}&email=${this.ruleForm.email}&gender=${this.ruleForm.sex}`).then(
                                response=>{
                                    console.log('请求成功了',response)
                                    this.$notify.success({
                                        title: '恭喜你',
                                        message: '修改信息成功',
                                        showClose:false,
                                        duration:3000,
                                    });
                                    this.$refs.ruleForm2.resetFields();
                                    this.sendSMSbtnshow=0
                                    this.sendSMSbtnshow2=0
                                    this.changeShowNum=0
                                    this.CheckNumShow=0
                                },error=>{
                                    this.$message({
                                        message: '呕吼请求失败了',
                                            type: 'warning'
                                        });
                                    console.log('请求失败了',error)
                                })
                            }).catch(() => {
                                this.$message({
                                    type: 'info',
                                    message: '已取消修改'
                                });          
                            });
                        }
                    }else{
                        this.$confirm('您将修改个人信息, 是否继续?', '提示', {
                            confirmButtonText: '继续',
                            cancelButtonText: '取消',
                            type: 'warning'
                        }).then(() => {
                            this.$addr.get(`users/change_info?phone=${this.ruleForm.phone}&email=${this.ruleForm.email}&gender=${this.ruleForm.sex}`).then(
                            response=>{
                                console.log('请求成功了',response)
                                this.$notify.success({
                                    title: '恭喜你',
                                    message: '修改信息成功',
                                    showClose:false,
                                    duration:3000,
                                });
                                this.$refs.ruleForm2.resetFields();
                                this.sendSMSbtnshow=0
                                this.sendSMSbtnshow2=0
                                this.changeShowNum=0
                                this.CheckNumShow=0
                            },error=>{
                                this.$message({
                                    message: '呕吼请求失败了',
                                        type: 'warning'
                                    });
                                console.log('请求失败了',error)
                            })
                        }).catch(() => {
                            this.$message({
                                type: 'info',
                                message: '已取消修改'
                            });          
                        });
                    }
                } else {
                    this.$notify.error({
                        title: '很遗憾',
                        message: '修改信息失败',
                        showClose:false,
                        duration:3000,
                    });
                    return false;
                }
                });
            },
            resetForm(formName) {
                this.$refs[formName].resetFields();
                this.$refs.ruleForm2.resetFields();
                this.sendSMSbtnshow=0
                this.sendSMSbtnshow2=0
                this.changeShowNum=0
                this.CheckNumShow=0
            },
            sendSMSBtn(){
                this.$addr.get(`sms/${this.ruleForm.phone}/${this.templateID}/send`).then(
                    response=>{
                        console.log('请求成功了',response)
                        this.$message({
                            message: '已经发送验证码，请注意查收',
                            type: 'success'
                        });
                        this.sendSMSbtnshow=0
                        this.sendSMSbtnshow2=1
                    },
                    error=>{
                        this.$message({
                            message: '呕吼请求失败了',
                            type: 'warning'
                        });
                        console.log('请求失败了',error.message)
                    }
                )
            },
        },
        mounted(){
            this.$addr.get(`users/get_by_uid`).then(
            response=>{
                console.log('请求成功了,我获取到了用户的数据',response)
                this.OldPhone=response.data.data.phone
                this.username=response.data.data.username
                this.ruleForm.phone=response.data.data.phone
                this.ruleForm.email=response.data.data.email
                this.ruleForm.sex=response.data.data.gender
                if(this.ruleForm.sex == 1){
                    this.ruleForm.resource='男'
                }else{
                    this.ruleForm.resource='女'
                }
            },error=>{
                this.$message({
                    message: '呕吼请求失败了',
                        type: 'warning'
                    });
                console.log('请求失败了,我没有获取到用户的数据',error)
            })
        },
        watch:{
            sendSMSbtnshow2(value){
                if(value == 1){
                    this.changeShowNum=60
                    this.timer = setInterval(() => {
                        this.changeShowNum--
                    }, 1000);
                    setTimeout(() => {
                        this.sendSMSbtnshow=1
                        this.sendSMSbtnshow2=0
                        clearInterval(this.timer)
                    }, 60000);
                }
            }
        },
}
</script>

<style scoped>
    .perdataruleForm2{
        position: absolute;
        margin-top: -250px;
        width: 450px;
    }
    .sendSMSBtn{
        z-index: 1;
        font-size: 10px;
        cursor: pointer;
        position: absolute;
        margin-top: -55px;
        margin-left: 240px;
        padding: 8px;
        padding-left: 10px;
        padding-right: 10px;
        border-radius: 3px;
        background-color: rgb(255, 233, 160);
    }
    .sendSMSBtn2{
        z-index: 1;
        font-size: 10px;
        cursor: not-allowed;
        margin-left: 240px;
        margin-top: -55px;
        position: absolute;
        padding: 8px;
        padding-left: 10px;
        padding-right: 10px;
        border-radius: 3px;
        background-color: rgb(223, 223, 223);
    }
</style>